<%--
  Created by IntelliJ IDEA.
  User: wancheng
  Date: 2019/3/8
  Time: 下午2:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>子曰青龙</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>

<div id="container" style="width: 1400px; height: 600px; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function () {
        GFunc.loadHighcharts();
    });
    var GFunc = {
        loadHighcharts: function () {
            var chart = {
                zoomType: 'x'
            };
            var title = {
                text: '2019年度学生报名折线图'
            };
            var subtitle = {
                text: document.ontouchstart = "鼠标选中区域可放大查看,起始日期为2019-01-19"
            };
            var xAxis = {
                type: 'datetime',
                minRange: 14 * 24 * 3600000 // 14 天
            };
            var yAxis = {
                title: {
                    text: '每日报名数'
                },
                allowDecimals:false,
                min:0
            };
            var legend = {
                enabled: false
            };
            var plotOptions = {
                area: {
                    fillColor: {
                        linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            };
            var dataArray = '<%=request.getAttribute("data")%>';
            dataArray = eval(dataArray);
            var series = [{
                type: 'area',
                name: '报名数量',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2019, 0, 19),
                data: dataArray
            }
            ];

            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.legend = legend;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);
        }

    }
</script>
</body>
</html>